<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Service</title>
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="../bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../bower_components/angular/angular.min.js" type="text/javascript"></script>
</head>
<body ng-controller="myController">
<div class="container">
    <input type="text" ng-model="o.name"/>
    <input type="text" ng-model="o.version"/>
    <button type="button" class="btn btn-success" ng-click="add()">新增</button>
    <table class="table">
        <thead>
        <tr>
            <td>书名</td>
            <td>版本</td>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="book in  books">
            <td>{{book.name}}</td>
            <td>{{book.version}}</td>
            <td><button type="button" class="btn btn-danger" ng-click="remove(book)">删除</button> </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script>
    var app = angular.module("app", []);
    app.factory("bookService", function () {
        var items = [{name: "node.js", version: 10.0}, {name: "javascript", version: 6.0}, {name: "java", version: 11}];
        return {
            list: function () {
                return items;
            },
            add: function (book) {
                items.push(book)
                return items;
            },
            remove: function (book) {
                items = items.filter(function (item) {
                    return item != book
                });
                return items;

            }
        }
    });
    app.controller('myController', function ($scope, bookService) {
        $scope.books = bookService.list();
        $scope.o = {};
        $scope.add = function () {
        var addBooke = JSON.parse(JSON.stringify($scope.o));
            $scope.books=
                bookService.add(addBooke);
            console.log($scope.books)
        };
        $scope.remove=function (o) {
            $scope.books=bookService.remove(o)
            console.log($scope.books)
        };
        console.log($scope.books)
    })
</script>
</html>